<!-- popup -->
<template>
  <div class="popup-wrapper" ref="popupWrapper">
    <ul class="popup-list">
      <li class="popup-list-item" v-for="(item, index) in params" :key="index">
        <span class="popup-item-name">{{ item.name }}:</span>
        <span class="popup-item-value">{{ item.value }}</span>
      </li>
    </ul>
    <div class="arrow"></div>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  data() {
    return {}
  },
  props: ['params', 'popupParams'],
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    init() {
      this.$refs.popupWrapper.style.width = this.popupParams.width
    }
  }
}
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.popup-wrapper {
  position: absolute;
  bottom: 40px;
  right: 0;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 5px;
}
.popup-list {
  .popup-list-item {
    height: 30px;
    line-height: 30px;
    .popup-item-name {
      padding-left: 20px;
    }
    .popup-item-value {
      margin-left: 10px;
    }
  }
}
.arrow {
  position: relative;
}
.arrow:after,
.arrow:before {
  border: 8px solid transparent;
  border-top: 8px solid rgba(0, 0, 0, 0.8);
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  right: 20px;
  content: ' ';
}
</style>
